<template>
  <div class="messageCenter">
    <el-card shadow="hover">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <!-- <el-form-item label="消息标题" prop="messageTitle">
          <el-input v-model="queryParams.messageTitle" placeholder="请输入消息标题" clearable @keyup.enter="handleQuery" />
        </el-form-item> -->
        <el-form-item label="消息状态" prop="messageStatus">
          <el-select v-model="queryParams.messageStatus" placeholder="请选择消息状态">
            <el-option label="全部" value="0" />
            <el-option label="已读" value="1" />
            <el-option label="未读" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="btnGroup">
      <el-button type="primary" :icon="Check" @click="readAllClick">全部已读</el-button>
      <el-button type="danger" :icon="Delete" :disabled="selectionList.length === 0" @click="delMsg">删除</el-button>
    </div>
    <div class="tableBox">
      <el-card shadow="hover">
        <el-table v-loading="loading" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" @row-dblclick="gotoDetail">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="operatorName" label="发送人" width="180" />
          <el-table-column prop="content" label="消息内容" />
          <el-table-column prop="createTime" label="发送时间" width="180" />
          <el-table-column prop="reading" label="状态" width="100">
            <template #default="scope">
              <el-tag v-if="scope.row.reading === true" type="success">已读</el-tag>
              <el-tag v-else type="danger">未读</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="readingTime" label="阅读时间" width="180" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="primary" plain size="small" :icon="Check" circle @click="readMessageClick(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="queryParams.total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="queryParams.total"
          @pagination="getList"
        />
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Delete, Check } from '@element-plus/icons-vue';
import { getMessageList, readMessage, readAllMessage, deleteMessage } from '@/api/notice/message';
import { ApiPerGetParentTreeNodeAll } from '@/api/personDoc/personDocApi';

const { proxy } = getCurrentInstance() as any;

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  messageStatus: '0'
});
const selectionList = ref([]);
const loading = ref(true);
onMounted(() => {
  getList();
});

const tableData = ref([]);
// 获取消息列表
const getList = async () => {
  loading.value = true;
  const params: any = {
    page: queryParams.pageNum - 1,
    size: queryParams.pageSize
  };
  if (queryParams.messageStatus !== '0') {
    params.reading = queryParams.messageStatus === '1' ? true : false;
  }
  const res = await getMessageList(params);
  if (res.code == 200) {
    loading.value = false;
    tableData.value = res.data.rows;
    queryParams.total = res.data.total;
  }
};
// 设置已读
const readMessageClick = async (row: any) => {
  console.log(row);
  if (row.reading) return;
  const res = await readMessage(row.id);
  if (res.code == 200) {
    getList();
  }
};
// 全部已读
const readAllClick = async () => {
  const res = await readAllMessage({});
  if (res.code == 200) {
    getList();
  }
};

const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const resetQuery = () => {
  queryParams.messageStatus = '0';
  handleQuery();
};
// 选中消息
const handleSelectionChange = (val: any) => {
  selectionList.value = val;
};
// 删除消息
const delMsg = async () => {
  ElMessageBox.confirm('是否确认删除消息', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const ids = selectionList.value.map((item: any) => item.id);
      const res = await deleteMessage(ids);
      if (res.code == 200) {
        ElMessage.success('删除成功');
        getList();
      }
    })
    .catch(() => {});
};

// 跳转
const gotoDetail = async (row: any) => {
    readMessageClick(row);
  if (row.fileType == 'enterprise' && row.type == 'update') {
    let params = {
      id: Number(row.nodeId),
      fileType: row.fileType==='enterprise' ? 2 : 1
    };
    let res = await ApiPerGetParentTreeNodeAll(params);
    if (res.code == 200) {
    let expandedKeys = res.data.map((item: any) => {
      let obj = {
        id: parseInt(item.id),
        label: item.realName
      };
      return obj;
    });
    sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys));
    proxy.$router.push({ path: '/newUi/enterprises/enterpriseDoc' });
  }
  }
};
</script>

<style lang="scss" scoped>
.messageCenter {
  padding: 8px;

  .btnGroup {
    margin-top: 20px;
    text-align: right;
  }

  .tableBox {
    margin-top: 10px;
  }
}
</style>
